<template>
  <view :style="[styles]">
    <u-notice-bar
        :bgColor="attribute.bgColor"
        :direction="attribute.direction"
        :text="attribute.text"
        :color="attribute.color"
        :fontSize="attribute.fontSize"
        :icon="attribute.icon || 'volume'"
        :url="attribute.url"
        :customStyle="style"
        @click="handleNav"
        :mode="attribute.mode"
    ></u-notice-bar>
  </view>
</template>

<script>
import { COMPREIFX } from "../../../libs/const/widget";
import { callNavigateHook } from "../../../libs/navigateTo";

export default {
  name: `${COMPREIFX}notice-bar`,
  props: {
    attribute: Object,
    styles: Object,
  },
  computed: {
    style({ styles }) {
      return {
        borderRadius: styles?.borderRadius,
      };
    },
  },
  methods: {
    handleNav() {
      if (this.attribute.navigateType && this.attribute.mode === "link") {
        callNavigateHook({
          type: this.attribute.navigateType,
          target: this.attribute,
        });
      } else {
        this.$emit("event", {
          eventName: "click",
          attribute: this.attribute,
        });
      }
    },
  },
};
</script>

<style scoped></style>
